@import '../vars.module.scss';
$--form-item-label-bg: mix($primary-color, #ffffff, 4%);
$--form-item-label-bordercolor: darken($--form-item-label-bg, 4%);
:global {
    $--row-gutter: 6px;
    .z-form-row {
        // .ant-form-item-children,
        // .ant-input-number {
        // 	display: inline-block;
        // }
        .z-page-loading-cover {
            background-color: rgba(198, 198, 198, 0.2);
            border-radius: $border-radius-base;
        }
        &.z-form-control-default {
            .z-page-loading-cover {
                margin: 4px 0;
            }
        }
        .ant-form-item-children,
        .ant-input-number,
        .ant-time-picker {
            width: 100%;
        }
        .ant-picker {
            width: 100% !important;
            min-width: auto !important;
        }
        .ant-form-explain,
        .ant-form-extra {
            font-size: 12px;
        }
        margin-left: 0;
        margin-right: 0;
        & > div {
            padding-left: 0;
            padding-right: 0;
        }
        .ant-mentions,
        textarea.ant-input {
            margin-bottom: 2px;
            margin-top: 2px;
        }
        .ant-form-item-children {
            position: static;
        }
    }

    .z-form-label-vertical {
        border-left: 1px solid $--form-item-label-bordercolor;
        .ant-form-item {
            margin-bottom: -1px;
            word-break: break-all;
            .ant-form-item-label {
                width: auto;
                white-space: normal;
                text-align: left;
                display: flex;
                align-items: center;
                line-height: normal;
                background-color: $--form-item-label-bg;
                border-style: solid;
                border-color: $--form-item-label-bordercolor;
                border-width: 1px 1px 1px 0px;
                margin-bottom: -1px;
                padding: 5px 8px;
                label:after {
                    display: none;
                }
            }
            .ant-form-item-control{
                border-style: solid;
                border-color: $--form-item-label-bordercolor;
                border-width: 1px 1px 1px 0px;
                padding: 3px 6px;
            }
            .ant-form-explain {
                position: absolute;
                padding: 0 6px;
                background-color: white;
                bottom: -10px;
                right: 11px;
                z-index: 2;
            }
            &.ant-form-item-with-help {
                margin-bottom: -1px;
            }
            &.hide-label {
                .ant-form-item-label {
                    display: none;
                }
            }
        }
    }
    .z-form-label-horizontal {
        border-left: 1px solid $--form-item-label-bordercolor;
        .ant-form-item {
            display: flex;
            flex-wrap: nowrap;
            margin-bottom: -1px;
            // overflow: hidden;
            word-break: break-all;
            .ant-form-item-row{
                width: 100%;
            }
            .ant-form-item-label {
                white-space: normal;
                text-align: left;
                width: 120px;
                display: flex;
                align-items: center;
                line-height: normal;
                background-color: $--form-item-label-bg;
                border-style: solid;
                border-color: $--form-item-label-bordercolor;
                border-width: 1px 1px 1px 0px;
                padding: 5px 8px;
                label:after {
                    display: none;
                }
            }
            .ant-form-item-control{
                // flex: 1;
                border-style: solid;
                border-color: $--form-item-label-bordercolor;
                border-width: 1px 1px 1px 0px;
                padding: 3px 6px;
                // overflow: hidden;
                min-width: 0;
            }
            .ant-form-explain {
                position: absolute;
                padding: 0 6px;
                background-color: white;
                top: 80%;
                right: 11px;
                z-index: 2;
            }
            &.ant-form-item-with-help {
                margin-bottom: -1px;
            }
            &.hide-label {
                .ant-form-item-label {
                    display: none;
                }
            }
        }
    }

    .z-form-label-inline,
    .z-form-label-inline + .z-add-formitem-btn {
        margin-left: -$--row-gutter;
        margin-right: -$--row-gutter;
    }
    .z-form-label-inline {
        & > div {
            padding-left: $--row-gutter;
            padding-right: $--row-gutter;
        }

        .ant-radio-group,
        .ant-checkbox-group {
            display: block;
            box-sizing: border-box;
            background-color: #fff;
            border: 1px solid $border-color-base;
            border-radius: 4px;
            outline: none;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            min-height: $input-height-base;
            padding: 0 15px;
            line-height: $input-height-base;
            margin-bottom: 4px;
        }

        &.z-form-control-small {
            .ant-form-item-control {
                line-height: 1.5;
            }

            .ant-radio-group,
            .ant-checkbox-group {
                min-height: $input-height-sm;
                line-height: $input-height-sm;
            }
            .z-form-item {
                button {
                    vertical-align: middle;
                }
                .ant-form-item-label {
                    transform: scale(0.85) translateY(-50%);
                }
                &.focus .ant-form-item-label,
                &.has-value .ant-form-item-label {
                    transform: scale(0.75) translateY(-80%);
                }
                .ant-form-explain {
                    transform: scale(0.9);
                }
            }
        }
        &.z-form-control-large {
            .ant-radio-group,
            .ant-checkbox-group {
                min-height: $input-height-lg;
                line-height: $input-height-lg;
            }
        }
        .z-form-item {
            margin-bottom: 10px;
            .ant-form-item-label {
                transform-origin: left center;
                border-radius: 4px 4px 0 0;
                padding: 0 6px;
                position: absolute;
                line-height: 1.4;
                top: 50%;
                left: 11px;
                transform: scale(1) translateY(-50%);
                pointer-events: none;
                z-index: 9;
                text-align: left;
                transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), top 150ms cubic-bezier(0.4, 0, 0.2, 1);
                background-color: transparent;
                label {
                    color: darken($border-color-base, 35%);
                }
            }

            .ant-form-item-label label:after {
                display: none;
            }
            textarea.ant-input {
                padding: 8px 11px;
            }
            &.focus .ant-form-item-label,
            &.has-value .ant-form-item-label {
                transform: scale(0.85) translateY(-50%);

                top: 0;
                // z-index: 1;
                background-color: white;
                left: 3px;
                // label {
                // 	color: #80868b;
                // }
            }
            &.has-disabled {
                .ant-form-item-label {
                    background-color: #f5f5f5;
                    label {
                        color: darken($border-color-base, 40%);
                    }
                }
            }
            &.focus .ant-form-item-label label {
                color: $primary-color;
            }
            &.has-value .ant-input {
                font-weight: 400;
            }
            .ant-form-explain {
                position: absolute;
                padding: 0 6px;
                background-color: white;
                bottom: -10px;
                right: 11px;
                z-index: 2;
            }
            &.ant-form-item-with-help {
                margin-bottom: 10px;
            }
            .ant-switch {
                margin: 4px 0 0;
            }
            &.hide-label {
                .ant-form-item-label {
                    display: none;
                }
            }
        }

        .ant-input:focus,
        .ant-input-number-focused,
        .ant-select-focused {
            box-shadow: none;
        }
        &.hide-label {
            .ant-form-item-label {
                display: none;
            }
        }
    }
}
